import { lazy,Suspense  } from "react";
import { menuData } from '@/utils/config';
// 使用路由懒加载（lazy）
const Layout = lazy(() => import("@/components/Layout"));
const Home = lazy(() => import("@/pages/home"));
const Login = lazy(() => import("@/pages/login"));
const BookDriftInReview = lazy(() => import("@/pages/dome/bookDriftInReview/Index"));
const BookFloatOutReview = lazy(() => import("@/pages/dome/bookFloatOutReview/Index"));
const DriftingBookstore = lazy(() => import("@/pages/dome/driftingBookstore/Index"));

const lazyComponent=(element:JSX.Element):JSX.Element=>{
  return  <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
}


const routers = [
  /**
   * 父子路由嵌套使用
   * 父路由路径为 '/'
   * children 属性对应父路由下的子路由
   */
  {
    path: "/",
    element:lazyComponent(<Layout />) ,
    children: [
      // 根路径时，使用 Navigate 路由重定向至 page1 页面
      {
        path: "/home",
        element:lazyComponent(<Home />),
      },
      {
        path: "/home/page/1708675108036",
        element:lazyComponent(<BookDriftInReview />),
      },
      {
        path: "/home/page/1708675716920",
        element:lazyComponent(<BookFloatOutReview />),
      },
      {
        path: "/home/page/1712481714531",
        element:lazyComponent(<DriftingBookstore />),
      },
    ],
  },
  {
    path: "/login",
    element:lazyComponent(<Login />),
  }
];

export default routers;
